﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/tabs.css" rel="stylesheet" type="text/css" />
    
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8rc3.sortable.min.js" type="text/javascript"></script>
    <script src="Scripts/jq.tabs.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tabContent').tabs({
                speed: 'slow',
                width: 700,
                tabHeaderWidth: 530,
                tabTitleClass: '.tabTitle',
                newTabTitle: 'New Tab',
				isDeleteBtn: false,
				
				addCallback: function(lastId) {
					alert('New tab ' + lastId + ' added');
				}
            });
        });
    </script>
    
</head>
<body>
<div id="tabsContainer">
    <div id="tabHeader">
        <div class="prev">P</div>
        <div class="tabs"></div>
        <div class="next">N</div>
        <div class="add">A</div>
    </div>
    <div id="tabContent">
        <div id="tabContent_0">
            <h3 class="tabTitle">Tab 1</h3>
            <p>Tab dfasdkfasd fklsdfas jfksdajf;kasd f;kasjd ;fajsd;kfjasdfj;laksdjf;lkas</p>
        </div>
        <div>
            <h3 class="tabTitle">Tab 2</h3>
            <p>Tab dfasdkfasd fklsdfas jfksdajf;kasd f;kasjd ;fajsd;kfjasdfj;laksdjf;lkas</p>
        </div>
        <div>
            <h3 class="tabTitle">Tab 3</h3>
            <p>Tab dfasdkfasd fklsdfas jfksdajf;kasd f;kasjd ;fajsd;kfjasdfj;laksdjf;lkas</p>
        </div>
        <div>
            <h3 class="tabTitle">Tab 4</h3>
            <p>Tab dfasdkfasd fklsdfas jfksdajf;kasd f;kasjd ;fajsd;kfjasdfj;laksdjf;lkas</p>
        </div>
    </div>
</div>
</body>
</html>
